<template>
  <a-drawer
    :title="title"
    :closable="true"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 600"
    @close="handleClose"
  >
    <section class="content">
      <a-form layout="vertical">
        <a-form-item label="业户" v-bind="validateInfos.owner_id">
          <a-select
            v-model:value="formData.owner_id"
            placeholder="请选择业户"
            :options="ownerList"
            @change="handleOwnerChange"
          ></a-select>
        </a-form-item>
        <a-form-item label="用户" v-bind="validateInfos.user_id">
          <a-select
            v-model:value="formData.user_id"
            placeholder="请选择用户"
            :options="userList"
          ></a-select>
        </a-form-item>
        <a-form-item label="IC卡号" v-bind="validateInfos.ic_card">
          <a-input
            v-model:value="formData.ic_card"
            placeholder="请输入IC卡号"
          />
        </a-form-item>
        <a-form-item label="状态" v-bind="validateInfos.status">
          <a-radio-group v-model:value="formData.status">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">禁止</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </section>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="handleClose">关闭</a-button>
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { computed, defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddICCard",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
    cardReadNum: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const title = computed(() => (props.id ? "编辑IC卡" : "添加IC卡"));

    const state = reactive({
      ownerList: [],
      userList: [],
    });

    const handleOwnerChange = () => {
      formData.user_id = undefined;
      store
        .dispatch("GetOwnerUserList", { owner_id: formData.owner_id })
        .then((list) => {
          state.userList = list;
        });
    };

    const formData = reactive({
      owner_id: undefined,
      user_id: undefined,
      ic_card: "",
      status: 1,
    });
    const rulesRef = reactive({
      owner_id: [{ required: true, message: "必填项" }],
      user_id: [{ required: true, message: "必填项" }],
      ic_card: [{ required: true, message: "必填项" }],
      status: [{ required: true, message: "必填项" }],
    });
    const { resetFields, validate, validateInfos } = useForm(
      formData,
      rulesRef
    );

    const handleClose = () => {
      emit("cancel");
    };

    const onSubmit = () => {
      validate().then(() => {
        const params = toRaw(formData);
        params.needMsg = true;
        let method = "post";
        if (props.id) {
          params.id = props.id;
          method = "put";
        }
        request[method]("/village", "/user/iccard", params).then((res) => {
          message.success(res.msg || "操作成功");
          emit("success");
        });
      });
    };

    const getDetail = () => {
      request
        .get("/village", "/user/iccard/detail", {
          id: props.id,
        })
        .then((res) => {
          const { detail } = res;
          formData.owner_id = detail.owner_id;
          formData.user_id = detail.user_id;
          formData.ic_card = detail.ic_card;
          formData.status = detail.status;
          store
            .dispatch("GetOwnerUserList", { owner_id: formData.owner_id })
            .then((list) => {
              state.userList = list;
            });
        });
    };

    const init = () => {
      store.dispatch("GetOwnerList").then((list) => {
        state.ownerList = list;
      });
      if (props.id) {
        getDetail();
      }
    };

    watch(
      () => props.cardReadNum,
      (val) => {
        if (val && props.visible) {
          formData.ic_card = props.cardReadNum;
        }
      }
    );

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
        }
      }
    );
    return {
      title,
      formData,
      validateInfos,
      ...toRefs(state),
      handleOwnerChange,
      handleClose,
      onSubmit,
    };
  },
});
</script>

<style></style>
